<template>

    <div class="page-100">
        <!--搜索框层级最高 列表最低 下面的选择框层级高 选择列表高-->
        <!--<yd-search class="searchbg"  fullpage v-model="searchContent" :itemClick="clickHandler" :on-submit="submitHandler"-->
                   <!--:on-cancel="cancelHandler">-->
        <!--</yd-search>-->

       <fullSearch searchtype="0" :commonList="commonList" class="searchbg" @checkBlur="checkBlur" @getKeyword="getKeyword" @searchClick="searchClick" @gotoback="gotoback" @lishiClick="lishiClick" @deleteClick="deleteClick"/>
        <typeSelectComponent v-if="!isshowsearch" @touchmove.prevent
                                 :dataList="typeList" type="1" class="officetypebg" @selectType="selectType" />
       <div v-if="officeAr.length > 0">
           <div v-if="!isshowsearch">
               <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo" class="listbg" >
                   <yd-list theme="3" slot="list" v-bind:class="{ 'scroll':isScroll==true,'noscroll':isScroll==false}">
                       <OfficeCellComponent  :officeAr="officeAr"  :selectAr="selectAr"   @selectspec="caiguobuttonclick"/>
                   </yd-list>
                   <span slot="doneTip" style="margin-left: 3rem;">没有更多数据</span>
               </yd-infinitescroll>
           </div>

       </div>
        <div v-else style="padding-top: 2rem">
            <div v-if="!isshowsearch">
                <img src="../../assets/task_none_task_icon.png" class="nolist-image" alt="">
                <p  class="nolist-tite">{{placeName}}</p>
            </div>

        </div>

        <!--&lt;!&ndash;采购弹框&ndash;&gt;-->
        <yd-popup v-model="isShowSpecs" position="bottom" height="40%" @touchmove.prevent >
            <div style="margin-top: 20px">
                <p class="leftcontext" style="color:#a5a6a6; font-size: 0.3rem;text-align: left">规格：</p>
                <div class="rightcontext" >
                    <div class="spec-bg" v-for="(item,index) in specs">
                        <div class="spec-button ">
                            <button type="button" class="custombutton" :class="{'selectButton':flag==index}" @click="detailsselectspec(index)">{{item.specName}}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div style="margin-top: 20px">
                <p class="leftcontext" style="color:#a5a6a6; font-size: 0.3rem;text-align: left">数量：</p>
                <div class="right" style="text-align: left">
                    <!--////0 是灰色#cccece 1 是办公用品 #e9b778 2 是凭证请领 #83d16f-->

                    <OfficeSpiner1 :index="0" max="500" min="0" unit="1" :amounts=amounts  @getspinnernumer="getspinnernumer"  width="80px" height="30px" >{{amounts}}</OfficeSpiner1>

                    <!--<Spinner1  type="1" :index="0" max="500" min="0" unit="1"   @addnumberclick="addnumberclick"-->
                              <!--@minusnumberclick="specminusnumberclick" :amounts=amounts width="80px" height="30px" ></Spinner1>-->
                </div>
            </div>
            <div class="button-bg">
                <yd-button size="large" type="warning" style="background-color:#e9b778;" @click.native="addNum">添加</yd-button>
            </div>
        </yd-popup>

        <!--下面的框-->
        <div class="belowoffice-big">
            <div class="mui-flex" style="height: 100%">
                <div class="cell" @click="showSelctClick">
                    <img v-if="isCheck" src="../../assets/officemenu.png" class="common" alt="">
                    <img v-if="!isCheck" src="../../assets/nomenu.png" class="common" alt="">

                    <div class="officeyuan">

                    <yd-badge v-if="isCheck" bgcolor="#f38209" >{{number}}</yd-badge>
                    </div>
                </div>
                <div class="cell3">
                    <div class="confrimactionBg">
                        <p  v-if="isCheck" class="confrimaction" @click="confrimClick">确定</p>
                        <p  v-if="!isCheck" class="confrimcumston">确定</p>

                    </div>

                </div>
            </div>

        </div>

    </div>


</template>

<script>
    import {commoditytype,commoditylist,commoditydetails} from "../../pcof/post";
    import {userInfoData} from '../../globalVariables'
    import OfficeCellComponent from "@/components/officeCellComponent.vue";
    import typeSelectComponent from "@/components/typeSelectComponent.vue";
    import OfficeSpiner1 from "@/components/officeSpiner.vue";
    import fullSearch from "@/components/fullSearch.vue";


    export default {
        name: "officeContainer",
        data() {

            return {

                placeName:'没有相关类型办公用品',
                isScroll:true,
                isshow:false,
                isshowsearch:false,
                commonList:JSON.parse(localStorage.getItem('officehistorysearch')),
                isShowSpecs:false,//是否展示规格
                specs:[],//规格的数据
                amounts:1,//规格默认个数
                specName:'',
                dataDic:{},//详情的选择数据 把数据添加到选择数组里面
                flag:1000,
                typeUuid:'',//类型
                searchContent:'',//搜索的关键字
                pageNumber: 1,
                pageSize: 10,
                serviceTotalPage: 1,
                isCheck:false,
                number:0,
                isA: true,
                isB:false,
                officeAr:[],
                typeList: [],
                selectAr:JSON.parse(localStorage.getItem('officedata')),
                result: [],
            //JSON.parse(localStorage.getItem('officedata')),
                //选择的数据 调转之前保存到本地 物品详情选择的时候更新保存一下


        }
        },
        async created()
        {
            // console.log('数组'+this.selectAr.length);
            if (this.selectAr.length===0)
            {
                // console.log('空的');
                this.isCheck=false;
                this.number=0;

            }else
            {


                var newAr=[];
                for (var i=0;i<this.selectAr.length;i++)
                {
                    if (this.selectAr[i].amounts===0)
                    {

                    }else
                    {
                        newAr.push(this.selectAr[i]);
                    }
                }
                if (newAr.length===0) {
                    this.isCheck=false;
                    this.number=0;
                }else
                {
                    this.isCheck=true;
                    this.number=newAr.length;
                }
                console.log('不空的');
                console.log(this.selectAr);

                // this.selectAr=JSON.parse(localStorage.getItem('officedata'));


            }

            this.getTypeFunc();
            this.freshenList();

        },
        components: {
            OfficeSpiner1,
            OfficeCellComponent,
            typeSelectComponent,
            fullSearch,

        },
         watch: {
             searchContent: function (newValue,oldValue) {
                 if (newValue === null || newValue === '' || newValue.length <= 0) {
                     this.searchContent = '';
                     this.freshenList();
                 } else {
                     this.searchContent = newValue;
                     this.freshenList();
                 }
             },
             selectAr: {
                 //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
                 handler(newValue, oldValue) {
                     console.log('选择的数据');
                     console.log(newValue);
                     if (newValue.length>0)
                     {
                         var newAr=[];
                         for (var i=0;i<newValue.length;i++)
                         {
                             if (newValue[i].amounts===0)
                             {

                             }else
                             {
                                 newAr.push(newValue[i]);
                             }
                         }
                         console.log(newAr);
                         if (newAr.length===0)
                         {
                             this.isCheck=false;
                             this.isshow=false;
                             this.number=0;


                         }else
                         {
                             // this.isCheck=true;
                             // this.isshow=true;
                             // this.number=newAr.length;
                             this.isCheck=true;
                             this.number=newAr.length;

                         }


                     }else
                     {
                         this.isCheck=false;
                         this.number=0;
                     }
                 },
                 deep: true
             },

        },
        methods:{
            deleteClick(data)
            {
                this.isshowsearch=false;
                localStorage.setItem('officehistorysearch',JSON.stringify
                ([]));
                this.commonList=JSON.parse(localStorage.getItem('officehistorysearch'));

            },
            lishiClick(data)
            {
                this.isshowsearch=false;
                console.log('选择');
                console.log(data);
                this.searchContent = data.keyword;
                this.freshenList();

            },
            gotoback(data)//返回按钮关键字为空
            {
                this.isshowsearch=false;
                this.searchContent = data.keyword;
                this.freshenList();
            },
            getKeyword(data)
            {
                console.log('改变数据');
                console.log(data);
                this.searchContent = data.keyword;
                this.freshenList();
            },
            searchClick(data)//搜索按钮
            {
                this.isshowsearch=false;
                console.log('搜索数据');
                this.searchContent = data.keyword;
                this.freshenList();

                console.log(data.keyword);
                var searAr= new Array();
                searAr=JSON.parse(localStorage.getItem('officehistorysearch'));
                var myArray=[];
                myArray=JSON.parse(localStorage.getItem('officehistorysearch'));

               var  isEqualTo1=false;
               var  isEqualTo2=false;
             if (searAr.length>0)
             {
                 isEqualTo2 = true;
                 //判断搜索内容是否存在，存在的话放到数组最后一位，不存在的话添加。
                 for (var i=0;i<myArray.length;i++)
                 {
                     var name=myArray[i];
                     if (this.searchContent ===name)
                     {
                         searAr.splice(i, 1);
                         searAr.push(this.searchContent);
                         isEqualTo1 = true;

                         break;
                     }
                 }

             }
                if (!isEqualTo1 || !isEqualTo2) {
                 if (this.searchContent===''||this.searchContent===null)
                 {

                 }else
                 {
                     searAr.push(this.searchContent);
                     console.log(searAr);
                 }

                }

                if(searAr.length > 5)
                {
                    searAr.splice(0,1);

                }
                localStorage.setItem('officehistorysearch',JSON.stringify
                (searAr));
                this.commonList=JSON.parse(localStorage.getItem('officehistorysearch'));


                    console.log('搜索记录');
             console.log(searAr);

            },
            checkBlur(data)
            {
                console.log('hahha');
                this.isshowsearch=true;


            },

            selectType(data)//类型的数据
            {
                console.log('传值'+data);
                this.typeUuid=data.typeUuid;
                console.log(this.typeUuid);
                this.freshenList();
            },
           //  采购按钮的相关数据
           async caiguobuttonclick(data) //采购按钮的事件
            {
                this.isShowSpecs=true;
                this.flag=1000;
                this.amounts=1;

                this.specName='';
                //  //  办公用品详情页面 mobile uuid 单子的id
                // // export const orderDetails = (
                var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
                var response = await commoditydetails(mobile,data.uuid);
                if (response.data.code === 200) {
                    this.$dialog.loading.close();
                    this.specs=response.data.data.specs;
                    this.isShowSpecs=true;

                    this.dataDic['brand']=response.data.data.brand ;
                    this.dataDic['desc']=response.data.data.desc ;
                    this.dataDic['description']=response.data.data.description ;
                    this.dataDic['imageUrl']=response.data.data.imageUrl ;
                    this.dataDic['name']=response.data.data.name ;
                    this.dataDic['supplierUuid']=response.data.data.supplierUuid ;
                    this.dataDic['typeName']=response.data.data.typeName ;
                    this.dataDic['typeNo']=response.data.data.typeNo;
                }else
                {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: response.data.msg,
                        timeout: 1500
                    });
                }

            },
            detailsselectspec(index)//详情选择规格的事件
            {
                this.flag=index;
                this.dataDic['specName'] = this.specs[index].specName;
                this.dataDic['price'] = this.specs[index].price;
                this.dataDic['uuid'] = this.specs[index].uuid;
                this.specName=this.specs[index].specName;
            },
            getspinnernumer(data) //详情选择数量的事件
            {
                this.amounts = data.amounts;
                // console.log('弹框数量'+this.amounts);
            },
            addNum ()//详情添加按钮 加入列表 弹框里面的添加按钮
            {
                if (this.specName ===''||this.specName===null)
                {
                    this.$dialog.toast({
                        mes: '请选择一个规格！',
                        timeout: 1500
                    });
                    return;
                }else {

                    this.dataDic['amounts']=this.amounts;
                    var newAr =new  Array();
                    newAr= JSON.parse(localStorage.getItem('officedata'));
                    if (newAr.length === 0) {
                        newAr.push(this.dataDic);

                    } else {


                        var number = 0;
                        for (var i = 0; i < newAr.length; i++) {

                            if (newAr[i].uuid === this.dataDic['uuid'] && newAr[i].specName === this.dataDic['specName'])
                            {
                                console.log(newAr[i].uuid+'  '+this.dataDic['uuid']);
                                console.log(newAr[i].specName+'  '+this.dataDic['specName']);

                                number++;
                                //新数据替换旧数据 把选择的数据替换列表的数据
                                var num = newAr[i].amounts + this.dataDic['amounts'];
                                var newDic = newAr[i];
                                newDic['amounts'] = num;
                                newAr.splice(i, 1, newDic);
                            }

                        }
                        if (number === 0) {
                            newAr.push(this.dataDic);

                        }

                   }

                    this.isShowSpecs=false;
                    localStorage.setItem('officedata',JSON.stringify
                    (newAr));
                    // console.log('弹框添加数据');
                    this.selectAr=JSON.parse(localStorage.getItem('officedata'));


                }

            },
            //  获取办公用品类型

            async getTypeFunc()
            {
                 // 办公用品类型 partnerUuid 客户的id
                var partnerUuid = JSON.parse(localStorage.getItem(userInfoData)).partnerUuid;
                var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
                var response = await commoditytype(mobile,partnerUuid);
                if (response.data.code === 200) {
                    this.$dialog.loading.close();
                    this.typeList=response.data.data;

                }else
                {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: response.data.msg,
                        timeout: 1500
                    });
                }
            },
            async loadList() {
                if (this.pageNumber>1)
                {

                    // mobile, partnerUuid,pageNumber,pageSize
                    /**
                     * 办公用品列表
                     *  partnerUuid 客户的id
                     *  name 搜索关键字
                     */
                    //     mobile,partnerUuid,pageNumber,pageSize,typeUuid,name,

                    var partnerUuid = JSON.parse(localStorage.getItem(userInfoData)).partnerUuid;
                    var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
                    var response = await commoditylist(mobile,partnerUuid,this.pageNumber,this.pageSize,this.typeUuid,this.searchContent);
                    if (response.data.code === 200) {
                        const _list = response.data.data.list;
                        console.log(_list);
                        this.officeAr = [..._list, ...this.officeAr];

                        // this.officeAr = [...this.officeAr, ..._list];
                        if (_list.length < this.pageSize || this.pageNumber === this.serviceTotalPage) {
                            /* 所有数据加载完毕 */
                            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                            return;
                        }

                        /* 单次请求数据完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
                        this.pageNumber++;
                    } else {

                    }

                }else
                {
                    /* 所有数据加载完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                }

            },

           //刷新列表
            async freshenList() {
                /**
                 * 办公用品列表
                 *  partnerUuid 客户的id
                 *  name 搜索关键字
                 */
                    //
                this.pageNumber=1;
                this.pageSize= 20;
                //     mobile,partnerUuid,pageNumber,pageSize,typeUuid,name,
                var partnerUuid = JSON.parse(localStorage.getItem(userInfoData)).partnerUuid;
                var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
                var response = await commoditylist(mobile,partnerUuid,this.pageNumber,this.pageSize,this.typeUuid,this.searchContent);
                this.$dialog.loading.open('加载中...');
                if (response.data.code === 200) {
                    this.$dialog.loading.close();
                    this.officeAr = response.data.data.list;

                    if (this.searchContent.length===0)
                    {
                        this.placeName='没有相关类型办公用品';

                    }else
                    {
                        this.placeName='未搜寻到相关结果';

                    }


                    this.serviceTotalPage = response.data.data.totalPage;
                    if (this.serviceTotalPage > 1) {

                        this.pageNumber++;
                    } else {
                        console.log(this.serviceTotalPage);
                        /* 所有数据加载完毕 */


                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                    }

                }else
                {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: response.data.msg,
                        timeout: 1500
                    });
                }

            },
            // 确定按钮
            confrimClick (){//确定按钮进入下一页

                this.selectAr=JSON.parse(localStorage.getItem('officedata'));

                var newAr=[];
                for (var i=0;i<this.selectAr.length;i++)
                {
                    if (this.selectAr[i].amounts===0)
                    {

                    }else
                    {
                        newAr.push(this.selectAr[i]);
                    }
                }
                if (newAr.length===0)
                {
                    this.$dialog.toast({
                        mes: '所选商品数量为空！',
                        timeout: 1500
                    });
                }else
                {
                    localStorage.setItem('room',JSON.stringify(''));
                    localStorage.setItem('phone',JSON.stringify(JSON.parse(localStorage.getItem(userInfoData)).mobile));
                    localStorage.setItem('address',JSON.stringify
                    (JSON.parse(localStorage.getItem(userInfoData)).addr));
                    localStorage.setItem('officedata',JSON.stringify(newAr));

                    this.$router.push({name: 'officeShowinfoandremark'});

                }

            },
            //是否展示选择列表
            showSelctClick(){//展示选择列表的数据

                this.$router.push({name: 'officeSelect'});


            },






        },

    }
</script>

<style lang='scss'>

    @import "./office.scss";
    .on{

        background-color:#e9b778;
        color:white;
        border: 1px solid #e9b778;
    }
    .scroll{
        overflow:visible ;
    }
    .noscroll
    {
        overflow:hidden ;

    }
    .searchbg
    {
        z-index:2000;
        position: fixed;
        width: 100%;
        height: 1rem;
        background-color: white;
        top: 0;
        left: 0;
    }
    .officetypebg{

        top: 1rem;
        position: fixed;
        width: 100%;
        /*overflow: scroll;*/
        height: 0.8rem;
        left: 0;
        z-index:1000;


    }
    .listbg{
        border-top: 1px solid #e1e1e1;
        position:relative;
        top: 1.8rem;
        height: 80%;
        padding-bottom: 2rem;
        display: flex;
        flex-wrap: wrap;
    }
    .belowoffice-big
    {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color:#b4b4b4;
        height: 1rem;
        width: 100%;
    }
    .common {
        width: 0.8rem;
        height: 0.8rem;
        margin-bottom: 0px;
        margin-top: 5px;
        margin-left: 20px;
    }
    .officeyuan
    {

        position: relative;
        top: -0.9rem;
        left: 1.6rem;
        width: 0.4rem;
        height: 0.4rem;

    }
    .confrimactionBg
    {
        background-color:#bfbfbf;
        color:white;
        height: 100%;
        width: 40%;
        position: absolute;
        right: 0rem;

    }
    .confrimaction
    {
        background-color:#e9b778;
        color:white;
        height: 100%;
        font-size: 0.28rem;
        padding-top:0.35rem ;
        width: 100%;


    }
    .confrimcumston{
        background-color:#bfbfbf;
        color:white;
        font-size: 0.28rem;
        padding-top:0.35rem ;
        height: 100%;
        width: 100%;
    }
    .button-bg{
        bottom: 0px;
        position: absolute;
        width: 100%;
    }
    .tanchuang_wrap{
        width:100%;
        height:100%;
        position:absolute;
        left: 0px;
        top: 0px;
        overflow-y: scroll;
        z-index:1000;
        display:none;
    }
    .lightbox{
        width:100%;
        z-index:100002;
        height:100%;
        background-color:black;
        filter:alpha(Opacity=70);
        -moz-opacity:0.2;
        opacity: 0.2;
        position:absolute;
        overflow-y: scroll;
        top:100px;
        left:0px;
    }
    .tanchuang_neirong{
        width:100%;
        background-color:#FFF;
        position: fixed;
        z-index:100003;
        bottom: 1rem;
        overflow-y: scroll
    }

    .custombutton
    {
        background-color:white;
        color:#a5a6a6;
        border-radius: 5px;
        padding: 5px 15px 5px 15px;
        border: 1px solid #a5a6a6;
    }
    .selectButton{
        background-color:#e9b778;
        color:white;
        border-radius: 5px;
        padding: 5px 15px 5px 15px;
        border: 1px solid #e9b778;
    }

    .leftcontext{
        width:80px;
        float:left;
        padding-left: 20px;

    }
    .rightcontext{
        margin-left:80px;
        text-align: left;
    }
    .spec-bg {
        display: inline-block;
        align-items: flex-start;
        vertical-line: top;
        flex-wrap: wrap;
        height: auto;
        .spec-button {
            padding-right: 0.2rem;
            overflow: hidden;
        }
    }

</style>